<template>
    <div id="dpo">
        <!--商品详情-->
        <div class="tp"><img :src="this.li2.img_url" alt=""></div>
        <div class="name">
            <div @click="div1(0)" ><span :class="this.div ==0?Classgreen:''">简介</span></div>
            <div @click="div1(1)"><span  :class="this.div ==1?Classgreen:''">目录</span></div>
            <div @click="div1(2)" ><span :class="this.div ==2?Classgreen:''">评价</span></div>
        </div>
        <div class="names">
            <div :class="this.div ==0?Classblo:''">
                <div class="jianjie">
                    <div>
                        <div class="leiname">{{this.li2.class_title}}</div>
                        <div class="xingx">
                            <div>
                                <div class="wujiao" id="wu">
                                    <div><img src="../../static/images/wu.png" alt=""></div>
                                    <div><img src="../../static/images/wu.png" alt=""></div>
                                    <div><img src="../../static/images/wu.png" alt=""></div>
                                    <div><img src="../../static/images/wu.png" alt=""></div>
                                    <div><img src="../../static/images/wu.png" alt=""></div>
                                </div>
                                <div class="pingf">
                                    <span>{{fong}}分</span>
                                    <span>2782人在学</span>
                                </div>
                            </div>
                            <div><span>独家</span></div>
                        </div>
                    </div>
                </div>

            </div>
            <div :class="this.div ==1?Classblo:''">1</div>
            <div :class="this.div ==2?Classblo:''">2</div>
        </div>

        <!--底部-->
        <div class="dibu">
            <div>
                <img src="../../static/images/gouwuche.png" alt="">
                <div>加入购物车</div>
            </div>
            <div>
                <div class="jar">加入学习</div>
            </div>
        </div>
    </div>
</template>

<script>
    // var wu = document.getElementById("wu").children;
    // console.log(wu);
	export default {
		name: "",
		data() {
			return {
                list:[],
                li2:{},
                id:0,
                div:0,
                Classgreen:"border",
                Classblo:"blo",
                fong:'4.8'

            }
		},
        created(){
            this.chushi();
            //获取url传入的id参数 赋值给this.id
            this.id = this.$route.params.id;

        },
		methods: {
		    chushi:function(){
                var wu = document.getElementById("wu").children;
                console.log(wu);
                //五角星
                var b=String(this.fong);
                var b2 = b.charAt(0); //4
                var b3 = b.charAt(2); //8
                wu[b2+1].className("bg");

		        //请求初始参数
                this.$ajax({
                    method:'post',
                    url:'http://134.175.237.162/index.php/info/searchCourse',
                }).then((res)=>{
                    if(res.data.code == 0){
                        this.list = res.data.data.data;
                        for(var i=0;i<this.list.length;i++){
                           if(this.list[i].id == this.id){
                               this.li2 = this.list[i];
                               console.log(this.li2)
                           }
                        }

                    }else{
                        console.log('请求异常')
                    }
                    //console.log(res,res.data.data.data)
                }).catch(()=>{
                    console.log('网络异常')
                })
            },
            div1:function (s) {
                this.div = s;
            }
        }


	}
</script>

<style scoped>

    #dpo{}
    .pingf{margin-top: -2px;}
    .wujiao{display: flex}
    .wujiao>div{
        position: relative;
        background-color: #2ac845;
        width: 18px;
        height: 14px}
    .wujiao>div.bg{background:linear-gradient(left,#2ac845 50%,white 50%)}
    .wujiao>div img{
        position: absolute;
        top: -2px;
        left: 0;
        width: 18px}
    .xingx{
        display: flex;
        justify-content: space-between;
    }
    .xingx>div:first-child{display: flex}
    .leiname{font-size: 16px;margin-bottom: 5px}
    .tp>img{width: 100%}
    .jianjie{
        padding: 10px;
        background-color: white;
    }
    .jianjie>div{border-bottom: 1px solid #e6eaf2;}
    .dibu{
        padding:10px;
        border-top: 1px solid #e6eaf2;
        background-color: white;
        position: fixed;
        left:0;
        bottom:0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        text-align: center;
    }
    .dibu>div:first-child{flex: 1;font-size: 12px}
    .dibu>div:last-child{flex: 3}
    .dibu img{width: 20px}
    .jar{
        background-color: #FF632A;
        color: white;
        border-radius: 25px;
        padding: 12px 0;
    }
    .name{
        margin-top: -6px;
        background-color:white;
        display: flex;
        text-align: center;
        border-bottom: 1px solid #e6eaf2;
    }
    .name>div{flex: 1; }
    .name span{
        display:inline-block;
        padding: 8px 28px;}
    .name span.border{
        border-bottom:2px solid green;
        color:green
    }
    .names>div{
        display:none;
    }
    .names>div.blo{
        display:block;
    }
</style>
